<template>
  <view class="subsection" :style="{ width: width, height: height, lineHeight: height }">
    <view
      v-for="(item, index) in itemList"
      :key="index"
      :style="{ borderWidth: index ? '1rpx' : '0rpx',width:itemWidthAuto?'auto':`${100/itemList.length}%`}"
      :class="[selectIndex == index ? 'active' : 'xq-disabled']"
      @tap="selected(index)"
    >
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "auto",
    },
    itemList: {
      type: Array,
      default: () => [],
    },
    selectIndex: {
      type: Number,
      default: -1,
    },
	itemWidthAuto:{
		type:Boolean,
		default:false
	}
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    selected(index) {
      this.$emit("selected", index);
    },
  },
};
</script>
<style lang="scss" scoped>
.subsection {
  border: 1rpx solid $theme-color;
  border-radius: $default-border-radius;
  overflow: hidden;
  display: flex;
  text-align: center;
  color: $theme-color;
  view {
    flex-grow: 1;
    box-sizing: border-box;
    // padding: 6rpx 0;
    border-left: 1rpx solid $theme-color;
  }
}
.subsection .active {
  background-color: $theme-color;
  color: #ffffff;
}
</style>
